// 监控台主页
import React, { useState, useEffect } from 'react';
import { DatePicker } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import moment from 'moment';
import _ from 'lodash';
import styles from './index.less';
import * as Utils from './utils/index';
import TreeSearch from './components/TreeSearch';
import CoreMonitoring from './components/CoreMonitoring';
import GroupMonitoring from './components/GroupMonitoring';
import Robot from '@/components/Robot';

const MonitoringConsoleIndex = props => {
  const { reduxItem, user, dispatch } = props;
  const [yearMonth, setYearMonth] = useState(moment().format('YYYY-MM'));
  // 初始化 组织树todo
  useEffect(() => {
    if (Object.keys(reduxItem.orgIds).length <= 0) {
      if (user.code === 1) {
        dispatch({
          type: 'MonitoringConsole/init',
          payload: {
            params: {
              userId: user.data.username,
            },
          },
          callback: data => {
            const getTree = Utils.getTreeDatas(data);
            const cloneGetTree = _.cloneDeep(getTree);
            const defaultSelected = Utils.getDefaultSelected(cloneGetTree);
            const { orgnofullpath, orgdepid, hrOrgTypeId } = defaultSelected[0];
            dispatch({
              type: 'MonitoringConsole/getOrgIds',
              payload: {
                orgIds: {
                  orgdepid,
                  hrOrgTypeId,
                  orgnofullpath,
                  yearMonth: moment(yearMonth).format('YYYYMM'),
                },
                getTree,
              },
            });
          },
        });
      }
    } else {
      const { orgdepid, hrOrgTypeId, orgnofullpath } = reduxItem.orgIds;
      dispatch({
        type: 'MonitoringConsole/getOrgIds',
        payload: {
          orgIds: {
            orgdepid,
            hrOrgTypeId,
            orgnofullpath,
            yearMonth: reduxItem.orgIds.yearMonth,
          },
          getTree: reduxItem.getTree,
        },
      });
    }
  }, []);

  useEffect(() => {
    if (Object.keys(reduxItem.orgIds).length > 0) {
      dispatch({
        type: 'MonitoringConsole/getOrgIds',
        payload: {
          orgIds: {
            ...reduxItem.orgIds,
            yearMonth: moment(yearMonth).format('YYYYMM'),
          },
          getTree: reduxItem.getTree,
        },
      });
    }
  }, [yearMonth]);

  useEffect(() => {
    if (Object.keys(reduxItem.orgIds).length > 0) {
      const { orgdepid, hrOrgTypeId } = reduxItem.orgIds;
      dispatch({
        type: 'MonitoringConsole/requestIndexinit',
        payload: {
          params1: {
            orgId: orgdepid,
            reportDate: reduxItem.orgIds.yearMonth,
          },
          params2: {
            hrOrgTypeId,
            orgId: orgdepid,
            reportDate: reduxItem.orgIds.yearMonth,
          },
        },
      });
    }
  }, [reduxItem.orgIds]);
  return (
    <PageHeaderWrapper
      className={styles.monitoringConsole}
      breadcrumb={null}
      title={<TreeSearch {...props} />}
      extra={
        <>
          截至年月：
          <DatePicker.MonthPicker
            allowClear={false}
            onChange={date => setYearMonth(moment(date, 'YYYY-MM'))}
            format="YYYY-MM"
            value={moment(yearMonth, 'YYYY-MM')}
            disabledDate={current => current && current > moment().endOf('day')}
          />
        </>
      }
    >
      <GroupMonitoring topData={reduxItem.topData} />
      <CoreMonitoring {...props} />
      <Robot />
    </PageHeaderWrapper>
  );
};

export default connect(state => ({
  user: state.user.currentUser,
  reduxItem: state.MonitoringConsole,
}))(MonitoringConsoleIndex);
